<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>按钮 - 在线演示 - Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="/layui/dist/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/css/global.css" media="all">
 </head>
 <body>
  <div class="layui-layout layui-layout-admin">
   <div class="layui-header header header-demo">
    <div class="layui-fluid"> <a class="logo" href="/index.html"> <img src="/static/images/layui/logo.png" alt="layui"> </a>
     <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
     <div class="layui-hide-xs site-notice"></div>
     <ul class="layui-nav" id="LAY_NAV_TOP">
      <li class="layui-nav-item "> <a href="/doc/index.html">文档</a> </li>
      <li class="layui-nav-item layui-this"> <a href="/demo/index.html">示例</a> </li>
      <li class="layui-nav-item"> <a href="javascript:;"> <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 周边 </a>
       <dl class="layui-nav-child layui-nav-child-c">
        <dd class="layui-hide-sm layui-show-xs" lay-unselect> <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
         <hr>
        </dd>
        <dd lay-unselect>
         <a href="/alone.html" target="_blank" lay-unselect>独立组件</a>
        </dd>
        <dd lay-unselect>
         <a href="/extend/" target="_blank">扩展组件</a>
        </dd>
       </dl> </li>
      <li class="layui-nav-item layui-hide-xs"> <a href="//gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a> </li>
     </ul>
    </div>
   </div> <!-- 让IE8/9支持媒体查询，从而兼容栅格 --> <!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
   <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
     <ul class="layui-nav layui-nav-tree site-demo-nav">
      <li class="layui-nav-item layui-nav-itemed"> <a class="javascript:;" href="javascript:;">演示</a>
       <dl class="layui-nav-child">
        <dd> <a href="/demo/index.html">调试预览</a>
        </dd>
       </dl> </li>
      <li class="layui-nav-item layui-nav-itemed"> <a class="javascript:;" href="javascript:;">布局</a>
       <dl class="layui-nav-child">
        <dd class=""> <a href="/demo/grid.html">栅格</a>
        </dd>
        <dd class=""> <a href="/demo/admin.html">框架</a>
        </dd>
       </dl> </li>
      <li class="layui-nav-item layui-nav-itemed"> <a class="javascript:;" href="javascript:;">基本元素</a>
       <dl class="layui-nav-child">
        <dd class="layui-this"> <a href="/demo/button.html">按钮</a>
        </dd>
        <dd class=""> <a href="/demo/form.html">表单</a>
        </dd>
        <dd class=""> <a href="/demo/nav.html">导航 / 面包屑</a>
        </dd>
        <dd class=""> <a href="/demo/menu.html">基础菜单</a>
        </dd>
        <dd class=""> <a href="/demo/tab.html">选项卡</a>
        </dd>
        <dd class=""> <a href="/demo/progress.html">进度条</a>
        </dd>
        <dd class=""> <a href="/demo/panel.html">面板</a>
        </dd>
        <dd class=""> <a href="/demo/badge.html">徽章</a>
        </dd>
        <dd class=""> <a href="/demo/timeline.html">时间线</a>
        </dd>
        <dd class=""> <a href="/demo/table-element.html">静态表格</a>
        </dd>
        <dd class=""> <a href="/demo/anim.html">动画</a>
        </dd>
        <dd class=""> <a href="/demo/auxiliar.html">辅助元素</a>
        </dd>
       </dl> </li>
      <li class="layui-nav-item layui-nav-itemed"> <a class="javascript:;" href="javascript:;">组件示例</a>
       <dl class="layui-nav-child">
        <dd class=""> <a href="/demo/layer.html"> 弹出层 </a>
        </dd>
        <dd class=""> <a href="/demo/laydate.html"> 日期与时间选择 </a>
        </dd>
        <dd class=""> <a href="/demo/table.html"> 数据表格 </a>
        </dd>
        <dd class=""> <a href="/demo/laypage.html"> 分页 </a>
        </dd>
        <dd class=""> <a href="/demo/dropdown.html"> 下拉菜单 </a>
        </dd>
        <dd class=""> <a href="/demo/upload.html"> 文件上传 </a>
        </dd>
        <dd class=""> <a href="/demo/transfer.html"> 穿梭框 </a>
        </dd>
        <dd class=""> <a href="/demo/tree.html"> 树形组件 </a>
        </dd>
        <dd class=""> <a href="/demo/colorpicker.html"> 颜色选择器 </a>
        </dd>
        <dd class=""> <a href="/demo/slider.html"> 滑块 </a>
        </dd>
        <dd class=""> <a href="/demo/rate.html"> 评分 </a>
        </dd>
        <dd class=""> <a href="/demo/carousel.html"> 轮播 </a>
        </dd>
        <dd class=""> <a href="/demo/laytpl.html"> 模板引擎 </a>
        </dd>
        <dd class=""> <a href="/demo/flow.html"> 流加载 </a>
        </dd>
        <dd class=""> <a href="/demo/util.html"> 工具模块 </a>
        </dd>
        <dd class=""> <a href="/demo/code.html"> 文本行修饰 </a>
        </dd>
       </dl> </li>
      <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
     </ul>
    </div>
   </div>
   <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
    <ul class="layui-tab-title site-demo-title">
     <li class="layui-this">预览</li>
     <li>查看代码</li>
     <li>帮助</li>
    </ul>
    <div class="layui-body layui-tab-content site-demo site-demo-body">
     <div class="layui-tab-item layui-show">
      <div class="layui-main">
       <div id="LAY_preview">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>按钮主题</legend>
        </fieldset>
        <div class="layui-btn-container"> <button type="button" class="layui-btn layui-btn-primary">原始按钮</button> <button type="button" class="layui-btn">默认按钮</button> <button type="button" class="layui-btn layui-btn-normal">百搭按钮</button> <button type="button" class="layui-btn layui-btn-warm">暖色按钮</button> <button type="button" class="layui-btn layui-btn-danger">警告按钮</button> <button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
        </div>
        <div class="layui-btn-container"> <button class="layui-btn layui-btn-primary layui-border">原始按钮</button> <button class="layui-btn layui-btn-primary layui-border-green">主色按钮</button> <button class="layui-btn layui-btn-primary layui-border-blue">百搭按钮</button> <button class="layui-btn layui-btn-primary layui-border-orange">暖色按钮</button> <button class="layui-btn layui-btn-primary layui-border-red">警告按钮</button> <button class="layui-btn layui-btn-primary layui-border-black">深色按钮</button>
        </div>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>按钮尺寸</legend>
        </fieldset>
        <div class="layui-btn-container"> <button type="button" class="layui-btn layui-btn-lg">大型按钮</button> <button type="button" class="layui-btn">默认按钮</button> <button type="button" class="layui-btn layui-btn-sm">小型按钮</button> <button type="button" class="layui-btn layui-btn-xs">迷你按钮</button>
        </div>
        <div class="layui-btn-container"> <button type="button" class="layui-btn layui-btn-lg layui-btn-normal">大型按钮</button> <button type="button" class="layui-btn layui-btn-normal">默认按钮</button> <button type="button" class="layui-btn layui-btn-sm layui-btn-normal">小型按钮</button> <button type="button" class="layui-btn layui-btn-xs layui-btn-normal">迷你按钮</button>
        </div>
        <div class="layui-btn-container"> <button type="button" class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button> <button type="button" class="layui-btn layui-btn-primary">默认按钮</button> <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button> <button type="button" class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button>
        </div>
        <div style="width: 370px; margin: 0;"> <button type="button" class="layui-btn layui-btn-fluid">流体按钮（即宽度最大化适应）</button>
        </div>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>灵活的图标按钮（更多图标请阅览：文档-图标）</legend>
        </fieldset>
        <div class="layui-btn-container"> <button type="button" class="layui-btn"><i class="layui-icon"></i></button> <button type="button" class="layui-btn"><i class="layui-icon"></i></button> <button type="button" class="layui-btn"><i class="layui-icon"></i></button> <button type="button" class="layui-btn"><i class="layui-icon"></i></button> <button type="button" class="layui-btn"><i class="layui-icon"></i></button> <button type="button" class="layui-btn"><i class="layui-icon"></i></button>
        </div>
        <div class="layui-btn-container"> <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
        </div>
        <div class="layui-btn-container"> <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
        </div>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>还可以是圆角按钮</legend>
        </fieldset>
        <div class="layui-btn-container"> <button type="button" class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button> <button type="button" class="layui-btn layui-btn-radius">默认按钮</button> <button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button> <button type="button" class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button> <button type="button" class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button> <button type="button" class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
        </div>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>风格混搭的按钮</legend>
        </fieldset>
        <div class="layui-btn-container"> <button type="button" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius">大型加圆角</button> <a href="/doc/element/button.html" class="layui-btn" target="_blank">跳转的按钮</a> <button type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon"></i> 删除</button> <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled"><i class="layui-icon"></i> 分享</button>
        </div>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>按钮组</legend>
        </fieldset>
        <div class="layui-btn-group"> <button type="button" class="layui-btn">增加</button> <button type="button" class="layui-btn ">编辑</button> <button type="button" class="layui-btn">删除</button>
        </div>
        <div class="layui-btn-group"> <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
        </div>
        <div class="layui-btn-group"> <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">文字</button> <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button> <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
        </div>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>按钮容器</legend>
        </fieldset>
        <div class="layui-btn-container"> <button type="button" class="layui-btn">按钮一</button> <button type="button" class="layui-btn">按钮二</button> <button type="button" class="layui-btn">按钮三</button>
        </div>
        <div class="layui-btn-container"> <button type="button" class="layui-btn">按钮一</button> <button type="button" class="layui-btn">按钮二</button> <button type="button" class="layui-btn">按钮三</button>
        </div>
       </div>
       <blockquote class="layui-elem-quote" style="margin-top: 30px;">
         更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
       </blockquote>
       <div style="margin: 15px 0 100px; padding-bottom: 100px;"> <!-- 通用-970*90 -->
        <ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="6835627838"></ins>
       </div>
      </div>
     </div>
     <div class="layui-tab-item"> <textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Layui&lt;/title&gt;
  &lt;meta name="renderer" content="webkit"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
  &lt;link rel="stylesheet" href="/layui/dist/css/layui.css"  media="all"&gt;
  &lt;!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --&gt;
&lt;/head&gt;
</textarea>
     </div>
     <div class="layui-tab-item">
      <div class="layui-main">
       <p>如果“查看代码”中的图标字符显示为：，那是正常的。具体在使用时，请参照【文档-图标字体】将其替换为对应的Unicode 字符。</p>
       <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>相关</legend>
       </fieldset> <a class="layui-btn layui-btn-normal" href="/doc/element/button.html" target="_blank">按钮文档</a>
      </div>
     </div>
    </div>
   </div>
   <div class="layui-footer footer footer-demo">
    <p> Copyright © 2021 <a href="/index.html">layui.itmtr.cn</a> MIT Licensed</p>
    <p> </p>
   </div>
   <script>
window.global = {
  pageType: 'demo'
  ,preview: function(){
    var preview = document.getElementById('LAY_preview');
    return preview ? preview.innerHTML : '';
  }()
};
</script>
   <div class="site-tree-mobile layui-hide"> <i class="layui-icon layui-icon-spread-left"></i>
   </div>
   <div class="site-mobile-shade"></div>
   <script src="/layui/dist/layui.js" charset="utf-8"></script>
   <script>
layui.config({
  base: '/static/lay/modules/layui/'
  ,version: '1632659138211'
}).use('global');
</script>
  </div>
 </body>
<script src="/common/common.js"></script>
</html>
